<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>私域旅游小程序业务逻辑流程图</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            accent: '#FF7D00',
            dark: '#1D2129',
            light: '#F2F3F5',
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .flowchart-container {
        transition: all 0.3s ease;
      }
      .flowchart-container:hover {
        transform: translateY(-5px);
      }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 text-dark">
  <!-- 导航栏 -->
  <nav class="bg-white shadow-md fixed w-full z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-sitemap text-primary text-2xl"></i>
        <h1 class="text-xl font-bold text-primary">私域旅游小程序业务流程图</h1>
      </div>
      <div class="hidden md:flex items-center space-x-8">
        <a href="#section1" class="text-gray-700 hover:text-primary transition-colors">成交员优惠券绑定</a>
        <a href="#section2" class="text-gray-700 hover:text-primary transition-colors">产品淡旺季价格</a>
        <a href="#section3" class="text-gray-700 hover:text-primary transition-colors">成交员与产品匹配</a>
        <a href="#section4" class="text-gray-700 hover:text-primary transition-colors">订单提交与佣金结算</a>
        <a href="#section5" class="text-gray-700 hover:text-primary transition-colors">后台优惠券管理</a>
        <a href="#section6" class="text-gray-700 hover:text-primary transition-colors">产品标签管理</a>
        <a href="#section7" class="text-gray-700 hover:text-primary transition-colors">完整业务流程</a>
        <a href="#section8" class="text-gray-700 hover:text-primary transition-colors">数据流向</a>
      </div>
      <button class="md:hidden text-gray-700 focus:outline-none" id="menu-toggle">
        <i class="fa fa-bars text-xl"></i>
      </button>
    </div>
    <!-- 移动端菜单 -->
    <div class="md:hidden hidden bg-white shadow-lg absolute w-full" id="mobile-menu">
      <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
        <a href="#section1" class="text-gray-700 hover:text-primary py-2 border-b border-gray-100">成交员优惠券绑定</a>
        <a href="#section2" class="text-gray-700 hover:text-primary py-2 border-b border-gray-100">产品淡旺季价格</a>
        <a href="#section3" class="text-gray-700 hover:text-primary py-2 border-b border-gray-100">成交员与产品匹配</a>
        <a href="#section4" class="text-gray-700 hover:text-primary py-2 border-b border-gray-100">订单提交与佣金结算</a>
        <a href="#section5" class="text-gray-700 hover:text-primary py-2 border-b border-gray-100">后台优惠券管理</a>
        <a href="#section6" class="text-gray-700 hover:text-primary py-2 border-b border-gray-100">产品标签管理</a>
        <a href="#section7" class="text-gray-700 hover:text-primary py-2 border-b border-gray-100">完整业务流程</a>
        <a href="#section8" class="text-gray-700 hover:text-primary py-2">数据流向</a>
      </div>
    </div>
  </nav>

  <!-- 主内容区 -->
  <main class="container mx-auto px-4 pt-24 pb-16">
    <!-- 介绍部分 -->
    <section class="mb-12 text-center">
      <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-4">私域旅游小程序业务逻辑流程图</h2>
      <p class="text-gray-600 max-w-3xl mx-auto">本页面展示了私域旅游小程序的核心业务流程，包括成交员管理、价格策略、订单处理等关键环节，帮助团队成员理解系统整体架构和业务逻辑。</p>
    </section>

    <!-- 流程图部分 -->
    <section id="section1" class="mb-16">
      <div class="flex items-center mb-4">
        <div class="w-1 h-8 bg-primary rounded-full mr-3"></div>
        <h3 class="text-2xl font-bold text-dark">1. 成交员优惠券绑定流程</h3>
      </div>
      <div class="bg-white rounded-xl shadow-lg p-6 flowchart-container">
        <div class="mermaid">
flowchart TD
    A[成交员登录系统] --> B[获取专属优惠券]
    B --> C{选择推广方式}
    C -->|生成二维码| D[生成推广二维码]
    C -->|生成链接| E[生成推广链接]
    D --> F[客户扫码]
    E --> G[客户点击链接]
    F --> H[系统验证链接有效性]
    G --> H
    H --> I[客户领取优惠券]
    I --> J[优惠券关联成交员ID]
    J --> K[客户使用优惠券下单]
    K --> L[系统验证优惠券有效性]
    L -->|有效| M[应用优惠券折扣并绑定成交员关系]
    L -->|无效/过期| N[提示优惠券无效]
    M --> O[计算订单金额]
    O --> P[客户支付订单]
        </div>
        <div class="mt-4 bg-blue-50 border-l-4 border-primary p-4 rounded">
          <h4 class="font-semibold text-primary mb-2">流程说明</h4>
          <p class="text-gray-700">成交员登录系统后获取专属优惠券，可生成二维码或链接进行推广。客户通过扫码或点击链接领取优惠券时，系统验证链接有效性并将优惠券关联成交员ID。当客户使用该优惠券下单时，系统再次验证有效性，有效则应用折扣并正式绑定成交员与客户的关系，确保成交员获得相应佣金。</p>
        </div>
      </div>
    </section>

    <section id="section2" class="mb-16">
      <div class="flex items-center mb-4">
        <div class="w-1 h-8 bg-secondary rounded-full mr-3"></div>
        <h3 class="text-2xl font-bold text-dark">2. 产品淡旺季价格展示流程</h3>
      </div>
      <div class="bg-white rounded-xl shadow-lg p-6 flowchart-container">
        <div class="mermaid">
flowchart TD
    A[用户进入产品详情页] --> B[系统获取当前日期]
    B --> C{判断当前季节}
    C -->|3-5月,9-11月| D[显示淡季价格]
    C -->|6-8月,12-2月| E[显示旺季价格]
    D --> F[淡季价格标签]
    E --> G[旺季价格标签]
    F --> H[用户可手动切换价格]
    G --> H
    H --> I[显示对应套餐价格]
    I --> J[更新购买按钮价格]
    J --> K[用户选择套餐下单]
        </div>
        <div class="mt-4 bg-green-50 border-l-4 border-secondary p-4 rounded">
          <h4 class="font-semibold text-secondary mb-2">流程说明</h4>
          <p class="text-gray-700">用户进入产品详情页后，系统自动获取当前日期并判断季节，显示对应的淡旺季价格及标签。用户也可以手动切换查看不同季节的价格，选择套餐后即可下单。</p>
        </div>
      </div>
    </section>

    <section id="section3" class="mb-16">
      <div class="flex items-center mb-4">
        <div class="w-1 h-8 bg-accent rounded-full mr-3"></div>
        <h3 class="text-2xl font-bold text-dark">3. 成交员与产品匹配流程</h3>
      </div>
      <div class="bg-white rounded-xl shadow-lg p-6 flowchart-container">
        <div class="mermaid">
flowchart TD
    A[系统分配成交员] --> B{匹配规则}
    B -->|地域匹配| C[根据产品所在地区]
    B -->|专业匹配| D[根据产品类型]
    B -->|负载均衡| E[根据成交员工作量]
    C --> F[查找该地区成交员]
    D --> G[查找专业对口成交员]
    E --> H[查找空闲成交员]
    F --> I[成交员信息展示]
    G --> I
    H --> I
    I --> J[显示成交员评分和成交记录]
    J --> K[用户可联系成交员]
    K --> L[成交员提供专业服务]
        </div>
        <div class="mt-4 bg-orange-50 border-l-4 border-accent p-4 rounded">
          <h4 class="font-semibold text-accent mb-2">流程说明</h4>
          <p class="text-gray-700">系统根据地域、专业和负载均衡三个维度为用户分配最合适的成交员。展示成交员的相关信息，包括评分和成交记录，方便用户选择。用户可直接联系成交员获取专业服务。</p>
        </div>
      </div>
    </section>

    <section id="section4" class="mb-16">
      <div class="flex items-center mb-4">
        <div class="w-1 h-8 bg-primary rounded-full mr-3"></div>
        <h3 class="text-2xl font-bold text-dark">4. 订单提交与佣金结算流程</h3>
      </div>
      <div class="bg-white rounded-xl shadow-lg p-6 flowchart-container">
        <div class="mermaid">
flowchart TD
    A[客户使用优惠券下单] --> B[系统验证优惠券有效性]
    B --> C{优惠券状态}
    C -->|有效| D[应用优惠券折扣]
    C -->|无效/过期| E[提示优惠券无效]
    D --> F[计算订单金额]
    F --> G[客户支付订单]
    G --> H[订单支付成功]
    H --> I[标记优惠券已使用]
    I --> J[根据绑定关系计算成交员佣金]
    J --> K[佣金进入待结算状态]
    K --> L[订单完成后佣金可提现]
    E --> M[客户重新选择支付方式]
        </div>
        <div class="mt-4 bg-blue-50 border-l-4 border-primary p-4 rounded">
          <h4 class="font-semibold text-primary mb-2">流程说明</h4>
          <p class="text-gray-700">客户下单时系统会验证优惠券有效性，有效则应用折扣并计算订单金额，客户支付成功后，系统标记优惠券已使用，并根据绑定的成交员关系计算对应佣金。佣金在订单完成后进入可提现状态。</p>
        </div>
      </div>
    </section>

    <section id="section5" class="mb-16">
      <div class="flex items-center mb-4">
        <div class="w-1 h-8 bg-secondary rounded-full mr-3"></div>
        <h3 class="text-2xl font-bold text-dark">5. 后台优惠券管理流程</h3>
      </div>
      <div class="bg-white rounded-xl shadow-lg p-6 flowchart-container">
        <div class="mermaid">
flowchart TD
    A[管理员登录后台] --> B[进入成交员管理]
    B --> C[选择成交员]
    C --> D[点击生成优惠券]
    D --> E[设置优惠券参数]
    E --> F[输入优惠券数量]
    F --> G[输入优惠券金额]
    G --> H[确认生成优惠券]
    H --> I[系统批量生成优惠券]
    I --> J[分配给指定成交员]
    J --> K[成交员可查看优惠券]
    K --> L[成交员开始推广使用]
        </div>
        <div class="mt-4 bg-green-50 border-l-4 border-secondary p-4 rounded">
          <h4 class="font-semibold text-secondary mb-2">流程说明</h4>
          <p class="text-gray-700">管理员登录后台后，可进入成交员管理页面，为指定成交员生成优惠券。设置优惠券的各项参数后，系统批量生成并分配给成交员，成交员即可开始推广使用。</p>
        </div>
      </div>
    </section>

    <section id="section6" class="mb-16">
      <div class="flex items-center mb-4">
        <div class="w-1 h-8 bg-accent rounded-full mr-3"></div>
        <h3 class="text-2xl font-bold text-dark">6. 产品标签管理流程</h3>
      </div>
      <div class="bg-white rounded-xl shadow-lg p-6 flowchart-container">
        <div class="mermaid">
flowchart TD
    A[管理员进入产品管理] --> B[选择产品编辑]
    B --> C[产品标签设置]
    C --> D[基础标签]
    D --> E[含门票/专业讲解/午餐]
    C --> F[营销标签]
    F --> G[热门推荐/限时特惠]
    C --> H[分类标签]
    H --> I[亲子游/情侣游/团体游]
    E --> J[保存标签设置]
    G --> J
    I --> J
    J --> K[前端页面显示标签]
    K --> L[用户根据标签筛选产品]
        </div>
        <div class="mt-4 bg-orange-50 border-l-4 border-accent p-4 rounded">
          <h4 class="font-semibold text-accent mb-2">流程说明</h4>
          <p class="text-gray-700">管理员在产品管理中可编辑产品标签，包括基础标签、营销标签和分类标签。设置完成后保存，前端页面将显示这些标签，用户可以根据标签快速筛选所需产品。</p>
        </div>
      </div>
    </section>

    <section id="section7" class="mb-16">
      <div class="flex items-center mb-4">
        <div class="w-1 h-8 bg-primary rounded-full mr-3"></div>
        <h3 class="text-2xl font-bold text-dark">7. 完整业务流程总览</h3>
      </div>
      <div class="bg-white rounded-xl shadow-lg p-6 flowchart-container">
        <div class="mermaid">
flowchart TD
    A[管理员配置系统] --> B[创建产品和价格]
    B --> C[设置产品标签]
    C --> D[分配成交员]
    D --> E[生成优惠券给成交员]
    E --> F[成交员推广获客]
    F --> G[客户扫码/点击链接领取优惠券]
    G --> H[优惠券关联成交员ID]
    H --> I[客户浏览产品]
    I --> J[查看淡旺季价格]
    J --> K[联系专属成交员]
    K --> L[使用优惠券下单]
    L --> M[系统验证优惠券并绑定关系]
    M --> N[支付完成]
    N --> O[成交员获得佣金]
    O --> P[客户享受服务]
    P --> Q[系统记录数据用于分析]
        </div>
        <div class="mt-4 bg-blue-50 border-l-4 border-primary p-4 rounded">
          <h4 class="font-semibold text-primary mb-2">流程说明</h4>
          <p class="text-gray-700">这是私域旅游小程序的完整业务流程，从管理员配置系统开始，创建产品、设置标签、分配成交员并生成优惠券。成交员通过二维码或链接推广获客，客户领取关联成交员ID的优惠券，浏览产品、下单支付。系统验证优惠券有效性并正式绑定关系，成交员获得佣金，客户享受服务，系统记录数据用于后续分析。</p>
        </div>
      </div>
    </section>

    <section id="section8" class="mb-16">
      <div class="flex items-center mb-4">
        <div class="w-1 h-8 bg-secondary rounded-full mr-3"></div>
        <h3 class="text-2xl font-bold text-dark">8. 数据流向图</h3>
      </div>
      <div class="bg-white rounded-xl shadow-lg p-6 flowchart-container">
        <div class="mermaid">
flowchart LR
    A[用户数据] --> B[订单系统]
    C[产品数据] --> B
    D[价格数据] --> B
    E[优惠券数据] --> B
    F[成交员数据] --> B
    L[推广员数据] --> B
    M[分销员数据] --> B
    B --> G[佣金系统]
    B --> H[库存系统]
    B --> I[财务系统]
    G --> N[成交员佣金]
    G --> O[推广员佣金]
    G --> P[分销员佣金]
    N --> J[数据分析]
    O --> J
    P --> J
    H --> J
    I --> J
    J --> K[运营决策]
    J --> Q[后台管理系统]
    Q --> R[成交员管理]
    Q --> S[推广员管理]
    Q --> T[分销员管理]
        </div>
        <div class="mt-4 bg-green-50 border-l-4 border-secondary p-4 rounded">
          <h4 class="font-semibold text-secondary mb-2">流程说明</h4>
          <p class="text-gray-700">该图展示了系统的数据流向，用户数据、产品数据、价格数据、优惠券数据、成交员数据、推广员数据和分销员数据都流向订单系统。订单系统将数据分发给佣金系统、库存系统和财务系统。佣金系统按角色分配佣金给成交员、推广员和分销员。各系统数据汇总到数据分析模块，为运营决策提供支持，并通过后台管理系统实现对各类人员的统一管理。</p>
        </div>
      </div>
    </section>

    <!-- 核心功能说明 -->
    <section class="bg-white rounded-xl shadow-lg p-8 mb-16">
      <h3 class="text-2xl font-bold text-dark mb-6 text-center">核心功能说明</h3>
      
      <div class="grid md:grid-cols-2 gap-8">
        <div class="bg-blue-50 p-6 rounded-lg">
          <div class="flex items-center mb-4">
            <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-4">
              <i class="fa fa-ticket text-primary text-xl"></i>
            </div>
            <h4 class="text-xl font-bold text-primary">优惠券绑定机制</h4>
          </div>
          <ul class="list-disc pl-5 space-y-2 text-gray-700">
            <li>每个成交员拥有专属优惠券</li>
            <li>通过二维码或链接实现客户领取</li>
            <li>优惠券关联成交员ID，但在使用时才绑定关系</li>
            <li>客户使用优惠券下单，成交员获得佣金</li>
          </ul>
        </div>
        
        <div class="bg-green-50 p-6 rounded-lg">
          <div class="flex items-center mb-4">
            <div class="w-10 h-10 rounded-full bg-secondary/20 flex items-center justify-center mr-4">
              <i class="fa fa-calendar-check-o text-secondary text-xl"></i>
            </div>
            <h4 class="text-xl font-bold text-secondary">淡旺季价格策略</h4>
          </div>
          <ul class="list-disc pl-5 space-y-2 text-gray-700">
            <li>系统自动识别当前季节</li>
            <li>支持手动切换查看不同季节价格</li>
            <li>价格策略影响所有套餐和产品</li>
            <li>为运营提供灵活的定价工具</li>
          </ul>
        </div>
        
        <div class="bg-orange-50 p-6 rounded-lg">
          <div class="flex items-center mb-4">
            <div class="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center mr-4">
              <i class="fa fa-users text-accent text-xl"></i>
            </div>
            <h4 class="text-xl font-bold text-accent">成交员匹配算法</h4>
          </div>
          <ul class="list-disc pl-5 space-y-2 text-gray-700">
            <li>基于地域、专业、负载等多维度匹配</li>
            <li>确保客户获得最适合的服务</li>
            <li>提高成交转化率和客户满意度</li>
            <li>提供成交员评分和成交记录参考</li>
          </ul>
        </div>
        
        <div class="bg-purple-50 p-6 rounded-lg">
          <div class="flex items-center mb-4">
            <div class="w-10 h-10 rounded-full bg-purple-200 flex items-center justify-center mr-4">
              <i class="fa fa-tags text-purple-600 text-xl"></i>
            </div>
            <h4 class="text-xl font-bold text-purple-600">产品标签体系</h4>
          </div>
          <ul class="list-disc pl-5 space-y-2 text-gray-700">
            <li>多层级标签分类管理</li>
            <li>支持营销标签和功能标签</li>
            <li>便于用户筛选和产品推荐</li>
            <li>提升产品曝光和转化效果</li>
          </ul>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-10">
    <div class="container mx-auto px-4">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="mb-6 md:mb-0">
          <div class="flex items-center space-x-2 mb-4">
            <i class="fa fa-sitemap text-primary text-2xl"></i>
            <h2 class="text-xl font-bold">私域旅游小程序</h2>
          </div>
          <p class="text-gray-400 max-w-md">业务逻辑流程图文档，用于团队内部参考和沟通，确保系统开发和运营的一致性。</p>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
          <div>
            <h3 class="text-lg font-semibold mb-4">核心流程</h3>
            <ul class="space-y-2 text-gray-400">
              <li><a href="#section1" class="hover:text-primary transition-colors">成交员管理</a></li>
              <li><a href="#section4" class="hover:text-primary transition-colors">订单处理</a></li>
              <li><a href="#section7" class="hover:text-primary transition-colors">完整流程</a></li>
            </ul>
          </div>
          
          <div>
            <h3 class="text-lg font-semibold mb-4">系统功能</h3>
            <ul class="space-y-2 text-gray-400">
              <li><a href="#section2" class="hover:text-primary transition-colors">价格策略</a></li>
              <li><a href="#section3" class="hover:text-primary transition-colors">匹配算法</a></li>
              <li><a href="#section6" class="hover:text-primary transition-colors">标签管理</a></li>
            </ul>
          </div>
          
          <div>
            <h3 class="text-lg font-semibold mb-4">相关资源</h3>
            <ul class="space-y-2 text-gray-400">
              <li><a href="#" class="hover:text-primary transition-colors">开发文档</a></li>
              <li><a href="#" class="hover:text-primary transition-colors">API 参考</a></li>
              <li><a href="#" class="hover:text-primary transition-colors">用户手册</a></li>
            </ul>
          </div>
        </div>
      </div>
      
      <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
        <p class="text-gray-400">© 2025 私域旅游小程序. 保留所有权利.</p>
        <div class="flex space-x-4 mt-4 md:mt-0">
          <a href="#" class="text-gray-400 hover:text-primary transition-colors">
            <i class="fa fa-github text-xl"></i>
          </a>
          <a href="#" class="text-gray-400 hover:text-primary transition-colors">
            <i class="fa fa-weixin text-xl"></i>
          </a>
          <a href="#" class="text-gray-400 hover:text-primary transition-colors">
            <i class="fa fa-envelope text-xl"></i>
          </a>
        </div>
      </div>
    </div>
  </footer>

  <!-- 回到顶部按钮 -->
  <button id="back-to-top" class="fixed bottom-6 right-6 bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/90">
    <i class="fa fa-arrow-up"></i>
  </button>

  <!-- JavaScript -->
  <script>
    // 初始化 mermaid
    mermaid.initialize({
      startOnLoad: true,
      theme: 'neutral',
      flowchart: {
        curve: 'linear',
        useMaxWidth: true,
      },
      securityLevel: 'loose',
    });

    // 移动端菜单切换
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    
    menuToggle.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
    });

    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    let lastScrollTop = 0;
    
    window.addEventListener('scroll', () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      
      if (scrollTop > 100) {
        navbar.classList.add('py-2');
        navbar.classList.remove('py-3');
        navbar.classList.add('bg-white/95');
        navbar.classList.add('backdrop-blur-sm');
      } else {
        navbar.classList.remove('py-2');
        navbar.classList.add('py-3');
        navbar.classList.remove('bg-white/95');
        navbar.classList.remove('backdrop-blur-sm');
      }
      
      lastScrollTop = scrollTop;
    });

    // 回到顶部按钮
    const backToTopButton = document.getElementById('back-to-top');
    
    window.addEventListener('scroll', () => {
      if (window.pageYOffset > 300) {
        backToTopButton.classList.remove('opacity-0', 'invisible');
        backToTopButton.classList.add('opacity-100', 'visible');
      } else {
        backToTopButton.classList.add('opacity-0', 'invisible');
        backToTopButton.classList.remove('opacity-100', 'visible');
      }
    });
    
    backToTopButton.addEventListener('click', () => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        
        const targetId = this.getAttribute('href');
        const targetElement = document.querySelector(targetId);
        
        if (targetElement) {
          window.scrollTo({
            top: targetElement.offsetTop - 80,
            behavior: 'smooth'
          });
          
          // 如果是移动端，点击后关闭菜单
          if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
            mobileMenu.classList.add('hidden');
          }
        }
      });
    });
  </script>
</body>
</html>